function PictureUploader(params)
{
	//Parameters el = element
	var deleteButtonEl = params.deleteButton;
	var previewerEl = params.previewerEl;
	var setImageButtonEl = params.setImageButtonEl;
	var thumbsContainerEl = params.thumbsContainerEl;
	var setImageFx = params.setImageFx;
	var deleteImageFx = params.deleteImageFx;
	var uploadImageFx = params.uploadImageFx;
	var theImages = params.theImages; //Images to show in the thumbnailConainer these images must contain URL, PK , CSS class and Selected indicating if the image is the selected one or not (optional)
	var addButtonEl = params.addButtonEl;
	var numberImagesToShow = params.numberImagesToShow;
	var nextBttnEl = params.nextBttnEl;
	var backBttnEl = params.backBttnEl;

	var theUploader = this;
	var theForm = createElement("form method=\"post\" enctype=\"multipart/form-data\" id=\"listingForm\" action=\"processImages.php\" style=\"display: none;\"");
	previewerEl.append(theForm);
	theUploader.imagesArray = [];
	theUploader.imageInPreviewer;

	function createElement(element)
	{
		var elStr = "<"+element+"></"+element+">";
		return $(elStr);
	}
	function Image(url, pk, cssClass){
		this.imageEl = createElement("div");//Div
		this.imageEl.addClass(cssClass);
		this.imageEl.css("background-image", "url('"+url+"')");
		this.imagePk = pk;
		this.imageUrl = url;
		var thisObj = this;

		this.imageEl.on("click", function(){
			putImageInPreviewer(thisObj);
		});

		this.removeImage = function()
		{
			thumbsContainerEl.remove(this.imageEl);
		}
	}
	function putImageInPreviewer(imageCreated)
	{
		theUploader.imageInPreviewer = imageCreated;
		var url = "url('"+imageCreated.imageUrl+"')";
		previewerEl.css("background-image", url);
	}
	function afterDeleteImage(imgCreated){
		imgCreated.removeImage();
		theForm.empty();
		var currentDisplayedIndex = theUploader.imagesArray.indexOf(this.imageInPreviewer);
		theUploader.imagesArray = theUploader.imagesArray.splice(currentDisplayedIndex, 1);
		if(theUploader.imagesArray.length > currentDisplayedIndex + 1) //There is nextImage
		{
			putImageInPreviewer(theUploader.imagesArray[currentDisplayedIndex + 1]);
		}else if(currentDisplayedIndex - 1 >= 0){
			putImageInPreviewer(theUploader.imagesArray[currentDisplayedIndex - 1]);
		}
		showImagesThumbs();
	}

	function afterUploadImage(r){
		var imageReceived = JSON.parse(r);
		createImage(imageReceived);
		var imageCreated = theUploader.imagesArray[theUploader.imagesArray.length - 1];
		debugger;
		insertThumbnail(imageCreated);
	}

	function insertThumbnail(imageCreated)
	{
		putImageInPreviewer(imageCreated);
		showImagesThumbs();
	}

	function afterSetImage(r){
		alert(r);
	}
	function createImage(imageReceived)
	{
		debugger;
		var url = imageReceived.url;
		var pk = imageReceived.pk;
		var cssClass = imageReceived.cssClass;

		var imageCreated = new Image(url, pk, cssClass);
		theUploader.imagesArray.push(imageCreated);
		if(imageReceived.selected)
		{
			putImageInPreviewer(imageCreated);
		}
	}
	function init()
	{
		for(var i=0; i<theImages.length; i++)
		{
			var imageReceived = theImages[i];
			createImage(imageReceived);
		}
		debugger;
		addButtonEl.on("click", uploadImage);
		deleteButtonEl.on("click", deleteImage);
		setImageButtonEl.on("click", markImageAsSelected);
		nextBttnEl.on("click", doNext);
		backBttnEl.on("click", doBack);
		showImagesThumbs();

	}

	function uploadImage()
	{
		theForm.empty();
		//var i = document.createElement("input");
		var i =  createElement("input name=\"imageUrl\" type=\"file\" accept=\"image/*\"");
		//var input = $(i);
		//var input = createElement("input name=\"imageUrl\" type=\"file\" accept=\"image/*\" style=\"position: absolute; top: -200px;\"");
		theForm.append(i);
		var onChangeFx = function()
		{
			debugger;
			uploadImageFx(theForm, afterUploadImage);
		};
		$(i).on("change", onChangeFx);
		$(i).trigger("click");
	}

	function deleteImage()
	{
		if(confirm("Are you sure you want to remove this image?"))
		{
			deleteImageFx(theUploader.imageInPreviewer, afterDeleteImage);
		}
	}

	function markImageAsSelected()
	{
		setImageFx(theUploader.imageInPreviewer, afterSetImage);
	}

	function showImagesThumbs()
	{
		var imagesLeftToShow = numberImagesToShow;
		var doShow = function(startingIndex)
		{
			for(var i = 0; i<startingIndex; i++)
			{
				theUploader.imagesArray[i].imageEl.remove();
			}
			for(var i = startingIndex; i<startingIndex + imagesLeftToShow; i++){
				if(i >= theUploader.imagesArray.length){
					break;
				}
				thumbsContainerEl.append(theUploader.imagesArray[i].imageEl);
			}
		};

		if(theUploader.imagesArray.length > 0){
			var currentDisplayedIndex = theUploader.imageInPreviewer ? theUploader.imagesArray.indexOf(theUploader.imageInPreviewer) : 0;
			if(currentDisplayedIndex == 0)
			{
				var startingIndex = currentDisplayedIndex;
				doShow(startingIndex, imagesLeftToShow);

			}else if(currentDisplayedIndex > 0){
				var startingIndex;
				var stepsBack = imagesLeftToShow - 1;
				while(currentDisplayedIndex >= 0 && stepsBack > 0)
				{
					startingIndex = currentDisplayedIndex - 1;
					stepsBack--;
					currentDisplayedIndex--;
				}
				doShow(startingIndex);
			}
		}
	}

	function doNext()
	{
		debugger;
		var currentDisplayedIndex = theUploader.imageInPreviewer ? theUploader.imagesArray.indexOf(theUploader.imageInPreviewer) : 0;
		if(currentDisplayedIndex + 1 < theUploader.imagesArray.length)
		{
			var currentDisplayedElement = theUploader.imagesArray[currentDisplayedIndex].imageEl;
			if(thumbsContainerEl.children().index(currentDisplayedElement) == numberImagesToShow -1){
				thumbsContainerEl.children().first().remove();
			}
			var elementToInsert = theUploader.imagesArray[currentDisplayedIndex + 1].imageEl;
			if(thumbsContainerEl.children().index(elementToInsert) == -1)
			{
				elementToInsert.insertAfter(thumbsContainerEl.children().last());
			}
			putImageInPreviewer(theUploader.imagesArray[currentDisplayedIndex + 1]);
		}
	}

	function doBack()
	{
		debugger;
		var currentDisplayedIndex = theUploader.imageInPreviewer ? theUploader.imagesArray.indexOf(theUploader.imageInPreviewer) : 0;
		if(currentDisplayedIndex > 0)
		{
			var currentDisplayedElement = theUploader.imagesArray[currentDisplayedIndex].imageEl;
			if(thumbsContainerEl.children().index(currentDisplayedElement) == 0 && thumbsContainerEl.children().index() == numberImagesToShow -1)
			{
				thumbsContainerEl.children().last().remove();				
			}
			var elementToInsert = theUploader.imagesArray[currentDisplayedIndex - 1].imageEl;
			if(thumbsContainerEl.children().index(elementToInsert) == -1)
			{
				elementToInsert.insertBefore(thumbsContainerEl.children().first());
			}
			putImageInPreviewer(theUploader.imagesArray[currentDisplayedIndex - 1]);
		}
	}

	init();
}